<template>
    <div class="personal-index" >
        <div class="p10">
            <div class="kitbox-mid">
                <div >
                    <img class="avatar" src="/static/images/wd-bg.png" alt="">
                </div>
                <div class="flex1 pl13">
                    <div class="c-000 fs-17">山水谈庄园</div>
                    <div class="kitbox-mid">
                        <div class="flex1">180****3746</div>
                        <div>
                            <div class="yue-box kitbox-mid fs-14 plr7">
                                <div><img class="yue" src="/static/images/yue.png" alt=""></div>
                                <div class="pl3">
                                    <span>余额</span>
                                    <span class="c-fe1e2d ml10">999,999</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="p10 ">
            <div class="mid-banner">
                <div class="item">
                    <div class="icon"><img class="yue" src="/static/images/qbdd.png" alt=""></div>
                    <div class="text">全部订单</div>
                </div>
                <div class="item">
                    <div class="icon"><img class="yue" src="/static/images/dfh.png" alt=""></div>
                    <div class="text">待支付</div>
                </div>
                <div class="item">
                    <div class="icon"><img class="yue" src="/static/images/dsh.png" alt=""></div>
                    <div class="text">待收货</div>
                </div>
                <div class="item">
                    <div class="icon"><img class="yue" src="/static/images/th.png" alt=""></div>
                    <div class="text">退换货</div>
                </div>
            </div>
        </div>

        <div class="plr10">
            <div class="kitbox-mid row plr18">
                <div class="icon"><img class="czshb" src="/static/images/czshb.png" alt=""></div>
                <div class="flex1 pl10">储值送红包</div>
                <div class="c-999"><van-icon name="arrow" /></div>
            </div>
            <div class="kitbox-mid row plr18">
                <div class="icon"><img class="hyzx" src="/static/images/hyzx.png" alt=""></div>
                <div class="flex1 pl10">会员中心</div>
                <div class="c-999"><van-icon name="arrow" /></div>
            </div>
            <div class="kitbox-mid row plr18">
                <div class="icon"><img class="kfrx" src="/static/images/kfrx.png" alt=""></div>
                <div class="flex1 pl10">客服热线</div>
                <div class="c-999"><van-icon name="arrow" /></div>
            </div>
            <div class="kitbox-mid row plr18">
                <div class="icon"><img class="bzzx" src="/static/images/bzzx.png" alt=""></div>
                <div class="flex1 pl10">帮助中心</div>
                <div class="c-999"><van-icon name="arrow" /></div>
            </div>
            <div class="kitbox-mid row plr18">
                <div class="icon"><img class="lxwm" src="/static/images/lxwm.png" alt=""></div>
                <div class="flex1 pl10">联系我们</div>
                <div class="c-999"><van-icon name="arrow" /></div>
            </div>
        </div>
      
    </div>
</template>

<script>
import userApi from "@/api/api-user";
import otherApi from '@/api/api-other'
import _ from 'underscore';
export default {
    name: "personalIndex",
    props:['type'],
    components: {

    },
    data(){
        return {
            user: undefined,
            sysParams: ""
        }
    },
    onLoad(){
        // var user = this.$store.getters.user
        // if(user&&user.nickname){

        // } else {
        //     this.link('/index/login')
        // }
    },
    onShow(){
        this.user = ''
        return
        wx.hideHomeButton()
        this.$store.dispatch('SetUserClient', "")
        this.GetUserInfo()
    },
    mounted() {
        this.user = this.$store.getters.user||{}
        this.GetUserInfo()
        this.ListSysParam()
    },
    methods: {
        ListSysParam(){
            otherApi.ListSysParam({}).then(data => {
                this.sysParams = data.result
            })
        },
        GetUserInfo(e){
            var vm = this
            userApi.GetUserInfo({}).then(res => {
                vm.user = _.assign(vm.user||vm.$store.getters.user, res.result);
                this.$forceUpdate()
            })
        },
        link(path){
            wx.navigateTo({
                url: "/pages"+ path
            })
        },
        async logout() {
            await this.$store.dispatch('LogOut')
            this.$router.push(`/login`)
        },
        toOrder(type){
            wx.navigateTo({
                url: "/pages/personal/order/index?type="+ type
            })
        },
        getUserInfo(e){
            var detail = e.mp.detail
            if(detail.errMsg == 'getUserInfo:ok'){
                userApi.UpdateUserInfoByWx({
                    sessionId: this.$store.getters.user.sessionId,
                    encryptedData: detail.encryptedData,
                    signature: detail.signature,
                    rawData: detail.rawData,
                    iv: detail.iv
                }).then(res => {
                    this.GetUserInfo()
                    
                })
            } else {
                wx.showToast({
                    title: "您拒绝了授权信息，无法进行该操作",
                    icon: "none",
                    duration: 2000
                })
            }
        },
        toZhibo(){
            let roomId = [6] // 填写具体的房间号，可通过下面【获取直播房间列表】 API 获取
            let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) // 开发者在直播间页面路径上携带自定义参数（如示例中的path和pid参数），后续可以在分享卡片链接和跳转至商详页时获取，详见【获取自定义参数】、【直播间到商详页面携带参数】章节（上限600个字符，超过部分会被截断）
            wx.navigateTo({
                url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`
            })
        }
    }
};
</script>
<style lang="scss" >
.personal-index{
    .avatar{
        width: 66px;
	    height: 66px;
        border-radius: 50%;
        display: block;
    }
    .yue-box{
	    height: 30px;
        border-radius: 30px;
        background: #fff;
        min-width: 133px;
        .yue{
            width: 18px;
            height: 18px;
            display: block;
        }
    }

    .mid-banner{
        background-color: #ffffff;
        border-radius: 7px;
        display: -webkit-box;
        .item{
            padding: 18px 0;
            width: calc(100% / 4);
            .icon{
                img{
                    width: 26px;
	                height: 26px;
                    display: block;
                    margin: 0 auto;
                }
            }
            .text{
                text-align: center;
                color: #000;
                font-size: 14px;
                padding-top: 6px;
            }
        }
    }
    

    .row{
        background: #fff;
        height: 70px;
        margin-top: 15px;
        &:first-child{
            margin-top: 0;
        }
        .icon{
            width: 21px;
        }
        .label{
            width: 20px;
        }
        .czshb{
            width: 20px;
	        height: 15px;
            display: block;
        }
        .hyzx{
            width: 21px;
	        height: 18px;
            display: block;
        }
        .kfrx{
            width: 18px;
	        height: 19px;
            display: block;
        }
        .bzzx{
            width: 19px;
	        height: 19px;
            display: block;
        }
        .lxwm{
            width: 18px;
	        height: 18px;
            display: block;
        }
    }






    .top-panel{
        .top-info{
            display: -webkit-box;
            .photo{
                img{
                    border-radius: 50%;
                    width: 70px ;
                    height: 70px;
                }
            }
            .btn{
                background-color: #ffffff;
                // border-radius: 42px;
                border: solid 1px #cccccc;
                text-align: center;
            }
        }
    }

    .banner-list{
        background-color: #ffffff;
	    // border-radius: 20px;
        .item{
            width: calc(100% / 4);
            text-align: center;
            .photo{
                img{
                    display: block;
                    margin: 0 auto;
                }
            }
            .text{
                font-family: SourceHanSansCN-Medium;
                font-size: 39px;
                color: #000000;
            }
        }
    }
 
    .list-wrap{
        border-radius: 6px;
    }

    .list{
        .van-cell{
            padding: 12px 15px;
            .left-icon{
                img{
                    // width: 22px;
                    // height: 22px;
                    position: relative;
                    top: 3px;
                }
                width: 40px;
                // margin-right: 15px;
            }
            .van-cell__title{
                font-size: 15px;
                color: #969799;
            }
            .van-icon-arrow{
                color: #aaa;
            }
            .icon-1{
                width: 20px;
	            height: 15px;
            }
            .icon-2{
                width: 22px;
	            height: 19px;
            }
            .icon-3{
                width: 22px;
	            height: 18px;
            }
            .icon-4{
                width: 15px;
                height: 20px;
                left: 2px;
            }
            .icon-5{
                width: 20px;
	            height: 14px;
            }
            .icon-6{
                width: 18px;
	            height: 18px;
            }
        }
        .online-kefu{
            position: relative;
            .online-btn{
                position: absolute;
                width: 100%;
                height: 100%;
                z-index: 1;
                opacity: 0;
            }
        }
    }
    
}
</style>
